import { createRouter, createWebHistory, type RouteRecordRaw, type Router } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes: Array<RouteRecordRaw & { meta: { url: string } }> = [
  {
    path: '',
    name: 'Home',
    meta: {
      url: '/'
    },
    component: HomeView
  },
  {
    path: 'img',
    name: 'Img',
    meta: {
      url: '/img'
    },
    component: () => import('../views/ImgView.vue')
  },
  {
    path: 'intersectionObserver',
    name: 'IntersectionObserver',
    meta: {
      url: '/intersectionObserver'
    },
    component: () => import('../views/IntersectionObserver.vue')
  },
  {
    path: 'echarts',
    name: 'Echarts',
    meta: {
      url: '/echarts'
    },
    component: () => import('../views/EchartsView.vue')
  },
  {
    path: 'tableSticky',
    name: 'TableSticky',
    meta: {
      url: '/tableSticky'
    },
    component: () => import('../views/TableSticky.vue')
  }
]

const router: Router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('../layout/BaseLayout.vue'),
      children: routes
    },
    {
      path: '/:pathMatch(.*)*',
      component: () => import('../views/404/404-index.vue')
    }
  ]
})

export default router
export { routes }
